<template>
	<view class="">
		<view class="" v-for="item in list" :key="item.id">
			<!-- {{list}} -->
			<view class="info">
				<view class="id">
					订单Id：{{item.id}}
				</view>
				<view class="time">
					订单时间：{{item.modifyTime}}
				</view>
			</view>
			<view class="video" v-for="item1 in item.list" :key="item1.id">
			<!-- {{item1.list}} -->
				<view class="top">
					<view class="topLeft">
						<img class="img" :src="item1.movie.image" alt="">
					</view>
					<view class="topMidle">
						<view class="title">
							{{item1.movie.name}}
						</view>
						<view class="row2">
							<view class="time">
								{{item1.movie.time}}
							</view>
							<view>
								<img class="icon" src="./static/img/05.png" alt="">
							</view>
							<view class="favoriteNum">
								{{item1.movie.favoriteNum.split(" ")[2]}}
							</view>
						</view>
						<view class="type">

							{{item1.movie.type ? item1.movie.type:"无"}}
						</view>
					</view>
					<view class="topRight">
						<view class="number">
							<span>{{item1.count}}张</span>
						</view>
						<view class="price">
							<span>￥{{item1.count*50}}</span>
						</view>
						<button v-if="!item.state" class="btn1" @click="showQRCode(item)">二维码</button>
						<button v-else class="btn2" >已观影</button>

						<!-- <button class="btn1" @click="addCart(item)" >加购</button> -->
					</view>
				</view>
				<view class="bottom">
					<p><span class="reason">推荐理由：</span>
						<span class="txt">{{item1.movie.reason}} </span>
					</p>
				</view>

			</view>
		</view>
		<view class="loadMore">
			<view v-if="loading" class="info">加载中...</view>
			<view v-else-if="finished" class="info">没有更多数据</view>
			<view v-else class="button1" @click="loadMore()">加载更多</view>
		</view>
		<view style="min-height: 100px"></view>
	</view>
</template>

<script>
	import {
		post
	} from '@/lib/index.js';
	export default {
		data() {
			return {
				list: [], // 电影列表
				pageNo: 0, // 页数
				pageSize: 3, // 页距
				loading: false, // 是否加载
				finished: false, // 是否全部加载
			}
		},
		created() {
			uni.$on('refreshHistoryOrderList', this.refreshList)
		},
		onLoad() { // 页面加载的什么周期
			this.getList();
		},
		methods: {
			async getList() { // 获取电影列表
				this.loading = true;
				const data = await post('/list/movieOrder', {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					sort: {
						createTime: -1
					}, // 创建时间越早的排在前面
					// $timeout: 5000, // 模拟延时5秒
				}, false);
				this.loading = false;
				if (!data.success) {
					return uni.showModal({
						content: data.message
					});
				}
				const finished = data.result.list.length < this.pageSize; // 如果当前拉取的数据个数小于pageSize，说明拉取完成
				this.finished = finished;
				this.list = [...this.list, ...data.result.list.filter(item => item.state==='finish') ]; // 追加数据
			},
			loadMore() { // 加载更多
				this.pageNo++;
				this.getList();
			},
			refreshList() {
				this.pageNo = 0;
				this.list = [];
				this.getList();
			},
			// async addCart(item) { // 加入购入车
			// 	const data = await post('/create/movieCart', {
			// 		movieId: item.id, // 因为拉取列表的时候需要去获取到movie的详情，需要连表查询，格式为[service]Id
			// 		count: 1, // 数量
			// 		// $timeout: 5000, // 模拟延时5秒
			// 	});
			// 	if (!data.success) {
			// 		return uni.showModal({
			// 			content: data.message
			// 		});
			// 	}
			// 	// todo
			// 	// 加入购物车成功，刷新购物车 
			// 	uni.showModal({
			// 		content: '加入购物车成功'
			// 	});
			// },
			showQRCode(item) { // 跳转到二维码的页面
				uni.navigateTo({
					url: './qrcode?id=' + item.id // 把订单id传给二维码页面
				});
			}
		}
	}
</script>

<style>
	.price {
		font-size: 20px;
		color: red;
		font-weight: 800;
		width: 100%;
		text-align: center;
		margin-left: 50px;
	}

	.info {
		background-color: #eeeeee;
		padding: 10px 10px;
		margin-top: 10px;
	}

	.video {
		padding: 6px 0;
		margin: 0 10px;
		border-bottom: 1px solid #ccc;
	}

	.top {
		display: flex;
	}

	.title {
		font-size: 18px;
		font-weight: 500;
	}

	.topMidle {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.row2 {
		display: flex;
		font-size: 12px;
	}

	.time,
	.favoriteNum,
	{
	font-size: 12px;
	color: #555;
	}

	.icon {
		width: 16px;
		height: 16px;
	}

	.type {
		margin-bottom: 10px;
		color: #555;
		font-size: 14px
	}

	.btn1 {
		font-size: 14px;
		color: #fff;
		background-color: #fb7299;
		width: 72px;
		height: 32px;
		border-radius: 4px;
		margin-left: 60px;
		margin-top: 4px;
		margin-bottom: 4px;
	}
	.btn2 {
		font-size: 14px;
		color: #fff;
		background-color: #ccc;
		width: 72px;
		height: 32px;
		border-radius: 4px;
		margin-left: 60px;
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.topRight {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.number {
		text-align: center;
		margin-left: 50px;
	}

	.img {
		width: 70px;
		height: 93px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.reason {
		color: #fb7299;
		font-weight: 500;
		font-size: 14px;
	}

	.bottom .txt {
		font-size: 14px;
		color: #4c4c4c;

	}

	.bottom {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.loadMore {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 10px 0;
	}

	.info {
		font-size: 12px;
		color: gray;
	}

	.button1 {
		border: 1px dashed #d3d3d3;
		width: 80px;
		height: 30px;
		font-size: 12px;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: gray;
	}
</style>